<template>
  <el-dialog
    v-model="show"
    title="管理员操作"
    @close="handleClose"
    width="600px"
    class="neomorphic-dialog"
  >
    <el-form
      :model="formData"
      label-width="120px"
      :rules="formRules"
      ref="formRef"
      class="neomorphic-form"
    >
      <el-form-item label="管理员昵称" prop="nickname">
        <el-input
          v-model="formData.nickname"
          placeholder="请输入管理员昵称"
          class="neomorphic-input"
        />
      </el-form-item>

      <el-form-item label="管理员帐号" prop="account">
        <el-input
          v-model="formData.account"
          placeholder="请输入管理员帐号"
          class="neomorphic-input"
        />
      </el-form-item>

      <el-form-item label="管理员密码" prop="password">
        <el-input
          v-model="formData.password"
          placeholder="请输入管理员密码"
          class="neomorphic-input"
        />
        <el-space fill class="mt-1" v-if="mode == 'edit'">
          <el-alert type="info" show-icon :closable="false">
            <p>不输入密码则表示不修改密码</p>
          </el-alert>
        </el-space>
      </el-form-item>

      <el-form-item label="管理员角色" prop="role_id">
        <el-select
          v-model="formData.role_id"
          placeholder="请选择角色"
          multiple
          style="width: 100%"
          :disabled="formData.id == 1"
          class="neomorphic-select"
        >
          <el-option v-for="item in roleLists" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="管理员头像" prop="avatar">
        <upload
          v-model:modelValue="formData.avatar"
          :limit="1"
          :multiple="false"
          class="neomorphic-upload"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button class="neomorphic-button-cancel" @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="handleSubmit"
        class="neomorphic-button-submit"
        >提交</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import upload from '@/components/image-upload/index.vue'
import { updateAdminApi, getRoleListApi } from '@/api/auth'

const show = ref(false)
const loading = ref(false)
const emit = defineEmits(['success'])
const formRef = ref<FormInstance>()
const mode = ref<'add' | 'edit'>('add')

const formData = ref({
  id: 0,
  nickname: '',
  account: '',
  password: '',
  avatar: [],
  role_id: [] as number[],
})

const defaultForm = () => ({
  id: 0,
  nickname: '',
  account: '',
  password: '',
  avatar: [],
  role_id: [] as number[],
})

const addRules = {
  nickname: [{ required: true, message: '请输入管理员昵称', trigger: 'blur' }],
  account: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
  role_id: [{ required: true, message: '请选择角色', trigger: 'change' }],
  avatar: [{ required: true, message: '请选择上传头像', trigger: 'change' }],
}
const editRules = {
  nickname: [{ required: true, message: '请输入管理员昵称', trigger: 'blur' }],
  account: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
  role_id: [{ required: true, message: '请选择角色', trigger: 'change' }],
  avatar: [{ required: true, message: '请选择上传头像', trigger: 'change' }],
}

const formRules = computed(() => (mode.value === 'add' ? addRules : editRules))

interface RoleItem {
  id: number
  name: string
}
const roleLists = ref<RoleItem[]>([])

const getRoleList = async () => {
  const { data } = await getRoleListApi({})
  if (formData.value.id != 1) {
    //如果不是超级管理员就过滤掉超级管理员
    roleLists.value = data.filter((item: any) => item.id != 1)
  } else {
    roleLists.value = data
  }
}

const handleClose = () => {
  show.value = false
  loading.value = false
  formRef.value?.clearValidate()
}

const handleSubmit = async () => {
  if (!formRef.value) return

  const valid = await formRef.value.validate().catch(() => false)
  if (!valid) return

  loading.value = true
  try {
    const res: any = await updateAdminApi(formData.value)
    ElMessage.success(res.message)
    handleClose()
    emit('success')
  } finally {
    loading.value = false
  }
}

const getDetails = (data: any) => {
  formData.value = { ...defaultForm(), ...data }
  formData.value.password = '' // 清空密码
}

defineExpose({
  open(type: 'add' | 'edit') {
    show.value = true
    mode.value = type
  },
  setFormData(data: any) {
    getDetails(data)
  },
  getRoleList,
})
</script>
